<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1{
				text-align: center;
			}
			.a1{
				box-sizing: border-box;
                border: none;
                border-bottom: 1px solid #666;
                }
			.warpper{
				width: 800px;
				display: flex;
				box-shadow: 1px 5px 10px 0px #666; 
				height: 600px;
				align-items: baseline;
				flex-direction: column;
				flex-wrap: nowrap;
				margin: 0 auto;
				justify-content: space-between;
			}
			span{
				display: inline-block;
				text-align: right;
				width: 100px;
				padding-right:10px ;
			}
			
			.btn{
				width: 800px;
                height: auto;
                display: flex;
                justify-content: space-around;
			}
		</style>
	</head>
	<script>
        window.onload = function() {
            let oBtn = document.getElementById('submit')
            oBtn.onclick = function() {
                document.getElementById('result').innerText += document.getElementById('name').value
                document.getElementById('result').innerText += document.getElementById('password').value
                document.getElementById('result').innerText += document.getElementById('confpassword').value
                
                let oMap = new Map()
                oMap.set('M',' 男')
                oMap.set('F',' 女')
                oMap.set('basketball',' 篮球')
                oMap.set('run',' 跑步')
                oMap.set('swim',' 游泳')
                oMap.set('computer',' 计算机应用与技术')
                oMap.set('software',' 软件技术')
                let oSex = document.getElementsByName('sex')
                let oHobby = document.getElementsByName('hobby')
                let oSubject = document.getElementById('subject')
                oSex.forEach(item=>{
                    if(item.checked) {
                        let oValue = item.value
                        //console.log(oMap.get(oValue))
                        document.getElementById('result').innerText += oMap.get(oValue)
                    }
                })
                oHobby.forEach(item=>{
                    if(item.checked) {
                        let oValue = item.value
                        document.getElementById('result').innerText += oMap.get(oValue)
                    }
                })
                var index=oSubject.selectedIndex;
                var sub = oSubject.options[index].text
                document.getElementById('result').innerText += sub
                document.getElementById('result').innerText += document.getElementById('intro').value
            }
        }
            
        </script>
	<body>
		<h1>表单</h1>
		<div class="warpper">
			<form name="form"></form>
		<p>
			<span class="l1">用户名：</span>
			<input type="text" placeholder="请输入用户名" name="usename" class="a1">
			<input type="button" value="校验用户名是否合法" >
		</p>
		<p>
			<span>密码：</span>
			<input type="password" placeholder="请输入密码" name="inputbox" class="a1" id="password">
		</p>
		<p>
			<span>确认密码：</span>
			<input type="password" placeholder="请再次输入密码" name="inputbox" class="a1" id="confpassword">
		</p>
		<p>
			<span>性别：</span>
			<input type="radio" name="sex" value="female" />男		
			<input type="radio" name="sex" value="male" />女
		</p>
		
		<p>
			<span>爱好：</span>
			<input type="checkbox" name="hobby" value="basketball" />篮球
			<input type="checkbox" name="hobby" value="run" />跑步
			<input type="checkbox" name="hobby" value="swim" />游泳
			
			
			
		</p>
		<p>
		<span>专业：</span>
		<select name="zhuanye">		
			<option value="software">软件技术</option>
			<option value="computer">计算机应用与技术</option>
		</select>
		</p>
		<p>
		<span>个人简介：</span>
		<textarea placeholder="请做一个简单的自我介绍" rows="10"></textarea>
		</p>
		<p>
			<span>头像：</span>
			<input type="file" name="file"/>
		</p>
			<div class="btn">
				<input type="button" value="提交">
				<input type="button" value="重置">
				</div>
		</div>
		<div id="result"></div>
	</body>
</html>
